/* eslint-disable vue/v-on-event-hyphenation */
<template>
  <PageWrapper title="用户管理" contentFullHeight>
    <SearchForm @get-user-list="getUserList" @get-single-user="getSingleUser" />
    <TableBasic
      :data="state.data"
      :listLoading="state.listLoading"
      @open-modal="setModalProps({ visible: true })"
      @update-user="updateUser"
      @delete-user="deleteUser"
    />
    <UserModel
      :singleUser="state.singleUser"
      @register="register"
      @add-user="addUser"
      @edit-single-user="editSingleUser"
      @reset-single-user="resetSingleUser"
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { useShopUserStore } from '/@/store/modules/shopUsers';
  import { useModalInner } from '/@/components/Modal';
  import { PageWrapper } from '/@/components/Page';
  import TableBasic from './components/TableBasic.vue';
  import UserModel from './components/userModel.vue';
  import SearchForm from './components/SearchForm.vue';

  interface stateModel {
    data: Array<Object> | any;
    listLoading: boolean;
    singleUser: object;
  }

  const state: stateModel = reactive({
    data: [],
    listLoading: false,
    singleUser: {},
  });

  const [register, { setModalProps, closeModal, changeOkLoading }] = useModalInner();
  const shopUserStore = useShopUserStore();

  // 重置singleUser
  function resetSingleUser() {
    state.singleUser = {};
  }

  onMounted(() => {
    getUserList();
  });
  // 用户列表
  async function getUserList() {
    state.listLoading = true;
    try {
      const params = {
        pagenum: 1,
        pagesize: 99,
      };
      if (shopUserStore.getQuery.username) {
        params['query'] = shopUserStore.getQuery?.username;
      }
      const userList = await shopUserStore.users(params);
      state.data = userList?.users;
      state.data.forEach((item) => {
        const getDate = new Date(item.create_time);
        item.create_time = `${getDate.getFullYear()}-${
          getDate.getMonth() + 1
        }-${getDate.getDate()}`;
        item.rowLoading = false;
      });
    } catch (error) {
      console.log(error);
    }
    state.listLoading = false;
  }

  // 添加用户
  async function addUser(value) {
    changeOkLoading(true);
    try {
      await shopUserStore.addUsers(value);
      closeModal();
      message.success('添加成功');
      getUserList();
    } catch (error) {
      console.log(error);
    }
    changeOkLoading(false);
  }

  async function updateUser(value) {
    value[1].rowLoading = true;
    try {
      await shopUserStore.updateUser(value[0]);
      message.success('修改成功');
    } catch (error) {
      console.log(error);
    }
    value[1].rowLoading = false;
  }

  // 删除用户
  async function deleteUser(value) {
    value[1].rowLoading = true;
    try {
      await shopUserStore.deleteUser(value[0]);
      message.success('删除成功');
      getUserList();
    } catch (error) {
      console.log(error);
    }
    value[1].rowLoading = false;
  }

  // 获取单个用户
  async function getSingleUser() {
    try {
      const { id } = shopUserStore.getQuery;
      const singleUser = await shopUserStore.singleUser({ id });
      if (singleUser) {
        state.singleUser = singleUser;
        setModalProps({ visible: true });
      }
    } catch (error) {
      console.log(error);
      getUserList();
    }
  }

  // 编辑单个用户
  async function editSingleUser(value) {
    try {
      await shopUserStore.editSingleUser(value);
      message.success('修改成功');
      closeModal();
      shopUserStore.setQuery({ id: '', username: '' });
      getUserList();
    } catch (error) {
      console.log(error);
    }
  }
</script>
